import React, {PureComponent} from "react"
import "./index.less"
import {SearchOutlined} from '@ant-design/icons';
import {AutoComplete, Button, Input} from "antd";
import PropTypes from "prop-types"
import {defaultSize} from "project-config"

export default class SearchAutoComplete extends PureComponent {

	constructor(props) {
		super(props)
	}

	render() {

		const {
			dataSource,
			placeholder,
			onSelect,
			onSearch,
			optionRender,
			allowClear,
			buttonText,
		} = this.props

		return (
			<AutoComplete
				className="global-search"
				options={
					!optionRender
						? dataSource
						: (dataSource || []).map((i, idx) => optionRender(i, idx))
				}
				onSelect={onSelect}
				onSearch={onSearch}
			>
				<Input.Search
					allowClear={allowClear || true}
					ref={r => this.refInput = r}
					placeholder={placeholder || "请输入查询内容"}
					enterButton={buttonText || "查询"}
					onSearch={onSelect}
					prefix={(<SearchOutlined/>)}
				/>
			</AutoComplete>
		);
	}
}


SearchAutoComplete.propTypes = {
	dataSource: PropTypes.array,
	width: PropTypes.number,
	className: PropTypes.string,
	placeholder: PropTypes.string,
	//按钮文字
	buttonText: PropTypes.string,
	onSelect: PropTypes.func,
	onSearch: PropTypes.func,
	onSubmit: PropTypes.func,
	optionRender: PropTypes.func,
	optionLabelProp: PropTypes.string
}
